<template>
	<view class="dish-card" :class="statusClass">
		<view class="card-content" @click="onChangeStatus(dish)">
			<view class="card-header">
				<text class="name">{{ index + 1 }}. {{ dish.name }}</text>
				<text class="place">{{ dish.place }} 号桌</text>
				<text class="status" :class="statusClass">{{ statusText }}</text>
			</view>

			<view class="card-body">
				<view class="info-box">
					<view class="info-item" style="flex: 3;">
						<uni-icons type="tune" size="16" color="#ff5a5f"></uni-icons>
						<text class="info-text">数量: {{ dish.number }}份</text>
					</view>

					<view class="info-item" style="flex: 4;">
						<uni-icons type="vip" size="16" color="#ff5a5f"></uni-icons>
						<text class="info-text">厨师: {{ dish.chefId }}</text>
					</view>

					<view class="info-item">
						<uni-icons type="calendar" size="16" color="#ff5a5f"></uni-icons>
						<text class="info-text">开始时间: {{ formattedTime }}</text>
					</view>
				</view>

				<view class="info-item">
					<uni-icons type="compose" size="16" color="#ff5a5f"></uni-icons>
					<text class="info-text">口味： {{ dish.dishFlavor }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted
	} from 'vue';
	import {
		formatDate
	} from '../utiles/user';
	import {
		putAdminOrderDetailUpdateApi
	} from '../api/admin';

	const props = defineProps({
		dish: {
			type: Object,
			required: true
		},
		index: {
			type: Number,
			default: 0
		},
		getListData: {
			type: Function, // 参数类型为函数
			required: true, // 必传参数
			default: () => {} // 默认值为空函数
		}
	});

	// onMounted(() => {
	// 	console.log('子组件：', props.dish, props.index);
	// })

	const statusMap = {
		0: {
			text: '待加工',
			class: 'status-pending'
		},
		1: {
			text: '加工中',
			class: 'status-processing'
		},
		2: {
			text: '待传菜',
			class: 'status-ready'
		},
		3: {
			text: '已完成'
		}
	};

	const userInfo = uni.getStorageSync('userInfo') || {}
	const onChangeStatus = async (item) => {
		const content =
			`${item.status!==1?'':item.dishFlavor?'口味:'+item.dishFlavor+'\n':''}当前状态为"${statusMap[item.status].text}",你确定要改成"${statusMap[item.status+1].text}"吗?`
		await uni.showModal({
			title: '提示',
			content,
			success: async (res) => {
				if (res.confirm) {
					const params = {
						id: item._id,
						status: item.status + 1
					}
					if (item.status === 2) {
						params.waiterId = userInfo.name
					} else {
						params.chefId = userInfo.name
					}
					console.log("子组件params:", params);
					await putAdminOrderDetailUpdateApi(params)
					if (item.status === 2) {
						uni.showModal({
							title: '提示',
							content: `把 ${item.name}${item.dishFlavor?"("+item.dishFlavor+")":""} 送到 ${item.place} 号桌`,
							showCancel: false,
							success: (res) => {
								props.getListData()
							}
						})
					} else {
						props.getListData()
					}
				}
			}
		})
	}

	const statusText = computed(() => statusMap[props.dish.status]?.text || '未知状态');
	const statusClass = computed(() => statusMap[props.dish.status]?.class || 'status-unknown');
	const formattedTime = computed(() => formatDate(props.dish.completeTime, true).slice(11));
</script>

<style lang="scss" scoped>
	.dish-card {
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin: 10rpx 20rpx;
		box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1);

		&.status-pending {
			border: 1px solid #faad14;
			background-color: rgba(250, 173, 20, 0.01);
		}

		&.status-processing {
			border: 1px solid #1890ff;
			background-color: rgba(24, 144, 255, 0.01);
			// 蓝色
		}

		&.status-ready {
			border: 1px solid #52c41a; // 绿色
			background-color: rgba(82, 196, 26, 0.01);
		}

		&.status-unknown {
			border: 1px solid #d9d9d9; // 灰色
			background-color: rgba(217, 217, 217, 0.01);
		}
	}

	.card-content {
		flex: 1;
	}

	.card-header {
		display: flex;
		align-items: baseline;
		margin-bottom: 16rpx;

		.name {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			flex: 1;
		}

		.place {
			font-size: 32rpx;
			font-weight: 500;
			color: #888;
		}

		.status {
			padding: 6rpx 12rpx;
			border-radius: 20rpx;
			font-size: 24rpx;
			color: #fff;
			margin-left: 20rpx;

			&.status-pending {
				background-color: #faad14; // 橙色
			}

			&.status-processing {
				background-color: #1890ff; // 蓝色
			}

			&.status-ready {
				background-color: #52c41a; // 绿色
			}

			&.status-unknown {
				background-color: #d9d9d9; // 灰色
			}
		}
	}

	.card-body {
		display: flex;
		flex-direction: column;

		.info-box {
			display: flex;
			justify-content: space-between;
		}
	}

	.info-item {
		display: flex;
		align-items: center;
		margin: 10rpx 0;
		font-size: 28rpx;
		color: #666;

		uni-icons {
			margin-right: 8rpx;
		}

		.info-text {
			flex: 1;
		}
	}
</style>